<template>
	<view class="content padding">
		<view class="ffffff padding border_2 margin_bottom3" v-for="(item,index) in list.data" :key="item.id"
			@click="goOrderInfo(item.id)">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="number margin_right2 yihang">订单编号：{{item.refund_no}}</view>
				</view>
				<view class="hongsetext" style="color: rgba(255, 0, 0, 1);" v-show="item.checkinfo_type==10">待审核
				</view>
				<view class="hongsetext" style="color: rgba(19, 196, 99, 1);" v-show="item.checkinfo_type==20">已通过
				</view>
				<view class="hongsetext" style="color: rgba(243, 39, 28, 1);" v-show="item.checkinfo_type==30">已拒绝
				</view>
				<view class="hongsetext" style="color: rgba(19, 196, 99, 1);" v-show="item.checkinfo_type==40">已取消
				</view>
			</view>
			<view class="flexbetween xiahuax margin_top">
				<view class="shilitu">
					<image :src="item.order.service_image_text" mode=""></image>
				</view>
				<view class="" style="width: 74%;">
					<view class="yihang text_a color_san">{{item.order.service_name}}</view>
					<view class="flexbetween margin_top5">
						<view class="qianshu">¥{{item.refund_money}}</view>
						<view class="shuliang">X1</view>
					</view>
				</view>
			</view>
			<!-- 所有按钮 -->
			<view class="flexright margin_top">
				<view class="huisebtn" v-show="item.can_refuse" @click.stop="refuseRefund(item.id)">拒绝退款</view>
				<view class="huangsebtn margin_left3" v-show="item.can_agree" @click.stop="agreeRefund(item)">同意退款</view>
			</view>
		</view>
		<!-- 拒绝退款 -->
		<u-modal :show="modalshow" :title="title" showCancelButton confirmColor="#f12a1f"
			@cancel="modalshow=false,error_reason=''" @confirm="confirmReturn">
			<view class="slot-content">
				<input class="text" type="text" placeholder="请输入拒绝原因" v-model="error_reason" v-if="type==1">
				<input class="text" type="text" placeholder="请输入退款金额" v-model="real_money" v-if="type==2">
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				list: {
					data: []
				},
				modalshow: false,
				title: "拒绝退款",
				error_reason: "", //拒绝理由
				tkid: "",
				type: 1,
				real_money: "", //实际退款金额
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				httpRequest.request("/api/shop.service_refund/getlist", 'GET', {
					page: page || 1,
					checkinfo_type: 0, //状态:0=全部,10=待审核,20=已通过,30=已拒绝,40=已取消
				}, false, false, true).then(res => { //我的订单接口
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page)
			},
			refuseRefund(id) { //拒绝退款
				this.tkid = id
				this.modalshow = true
				this.title = "拒绝退款"
				this.type = 1
			},
			agreeRefund(item) { //同意退款
				this.tkid = item.id
				this.modalshow = true
				this.title = "请确定退款金额"
				this.real_money = item.refund_money
				this.type = 2
			},
			confirmReturn() { //确定拒绝退款
				if (this.type == 1) {
					if (this.error_reason == "") {
						httpRequest.toast("请输入拒绝申请的原因")
						return false
					}
					httpRequest.request('/api/shop.service_refund/refuse', 'POST', {
						order_refund_id: this.tkid,
						error_reason: this.error_reason
					}, false, false, true).then(res => {
						httpRequest.toast(res.msg);
						if (res.code == 1) {
							this.init()
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
					this.modalshow = false
					this.error_reason = ""
				} else {
					httpRequest.request('/api/shop.service_refund/agree', 'POST', {
						order_refund_id: this.tkid,
						real_money: this.real_money, //实际退款金额
					}, false, false, true).then(res => {
						httpRequest.toast(res.msg);
						if (res.code == 1) {
							this.init()
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
					this.modalshow = false
				}
			},
			goOrderInfo(id) { //订单详情
				uni.navigateTo({
					url: "/pages_mine/serviceRefundOrderInfo?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.number {
		width: calc(100vw - 72rpx - 140rpx);
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.huangsebtn {
		border: 2rpx solid rgba(243, 39, 28, 1);
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(243, 39, 28, 1);
	}

	.huisebtn {
		border: 2rpx solid #666666;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
	}

	.shuliang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(243, 39, 28, 1);
	}

	.qianshu {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: rgba(243, 39, 28, 1);
	}

	.shilitu {
		width: 134rpx;
		height: 128rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.hongsetext {
		width: 72rpx;
		min-width: 72rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: RGBA(255, 117, 16, 1);
	}
</style>